<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>guessNum</title>
</head>
<body>
    <input type="button" id="resetButton" value="重新开始一局游戏"><br/>
    请输入要猜的数字：<input type="text" id="guessNum">
    <input type="button" id="guessButton" value="猜"><br/>
    已经猜的次数：<span type="text" id="count"></span><br/>
    结果：<span type="text" id="result"></span>

    <script src="jquery-3.7.1.min.js"></script>
    <script>
        // 生成一个数字之后，再开始猜
        var num = Math.floor(Math.random() * 100 + 1);
        console.log("num = " + num);
        var count = 0;
        // 开始猜
        $("#guessButton").click(function(){
            count++;
            console.log("count: " + count);
            $("#count").text(count);
            var guessNum = $("#guessNum").val();
            console.log("guessNum = " + guessNum);
            if(guessNum < num){
                $("#result").text("猜小了！");
            }else if(guessNum > num){
                $("#result").text("猜大了！");
            }else{
                $("#result").text("猜对了！");
            }
        });

        $("#resetButton").click(function(){
            num = Math.floor(Math.random() * 100 + 1);
            console.log("num = " + num);
            count = 0;
            $("#count").text("");
            $("#result").text("");
        });
    </script>
</body>
</html>
